{% extends 'base_order.html' %}
{% block title %}天天生鲜-购物车{% endblock title %}



{% block order_title %}购物车{% endblock order_title %}

{% block body %}
	<div class="total_count">全部商品<em>2</em>件</div>	
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
    <form action="{% url 'order:cartpay' %}" method="get">
    {% csrf_token %}
    {% for user_cart in user_cart_list %}
	<ul class="cart_list_td clearfix">
		<li class="col01"><input type="checkbox" name="goods_id" checked value="{{ user_cart.goods.id }}"></li>
		<li class="col02"><img src="{{ user_cart.goods.image.url }}"></li>
		<li class="col03"><b id="goods_name">{{ user_cart.name }}</b><br><em>{{ user_cart.price }}元/{{ user_cart.unite }}</em></li>
		<li class="col04">{{ user_cart.unite }}</li>
		<li class="col05">{{ user_cart.price }}元</li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;" class="add fl">+</a>
				<input type="text" class="num_show fl" value="{{ user_cart.count }}">
				<a href="javascript:;" class="minus fl">-</a>	
			</div>
		</li>
		<li class="col07">{{ user_cart.totail }}元</li>
		<li class="col08"><a href="javascript:;">删除</a></li>
	</ul>
    {% endfor %}


{#	<ul class="cart_list_td clearfix">#}
{#		<li class="col01"><input type="checkbox" name="" checked></li>#}
{#		<li class="col02"><img src="../static/images/goods/goods003.jpg"></li>#}
{#		<li class="col03">大兴大棚草莓<br><em>16.80元/500g</em></li>#}
{#		<li class="col04">500g</li>#}
{#		<li class="col05">16.80元</li>#}
{#		<li class="col06">#}
{#			<div class="num_add">#}
{#				<a href="javascript:;" class="add fl">+</a>#}
{#				<input type="text" class="num_show fl" value="1">	#}
{#				<a href="javascript:;" class="minus fl">-</a>	#}
{#			</div>#}
{#		</li>#}
{#		<li class="col07">16.80元</li>#}
{#		<li class="col08"><a href="javascript:;">删除</a></li>#}
{#	</ul>#}
	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em></em><br>共计<b></b>件商品</li>
		<li class="col04"><input type="submit" value="结算"></li>
	</ul>
    </form>
{% endblock body %}

{% block buttom_info %}
	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
    {% csrf_token %}
{% endblock buttom_info %}

{% block buttom_js %}
    <script type="text/javascript" src="../static/js/jquery-3.6.0.min.js"></script>
    <script>
		// 计算被选中的商品的总件数和总价格
    $(function () {
        update_page_info()
    })
   function update_page_info() {
        // 获取所有被选中的商品的checkbox
        // 获取所有被选中的商品所在的ul元素
        total_count = 0
        total_price = 0
        $('.cart_list_td').find(':checked').parents('ul').each(function () {
            // 获取商品的数目和小计
            count = $(this).find('.num_show').val()
            amount = $(this).children('.col07').text()
            // 累加计算商品的总件数和总价格
            count = parseInt(count)
            amount = parseFloat(amount)
            total_count += count
            total_price += amount
        })
        // 设置被选中的商品的总件数和总价格
        $('.settlements').find('em').text(total_price.toFixed(2))
        $('.settlements').find('b').text(total_count)
    }
    // 计算商品的小计
    function update_goods_amount(sku_ul) {
        // 获取商品的价格和数量
        count = sku_ul.find('.num_show').val()
        price = sku_ul.children('.col05').text()
        // 计算商品的小计
        amount = parseInt(count)*parseFloat(price)
        // 设置商品的小计
        sku_ul.children('.col07').text(amount.toFixed(2)+'元')
    }

    // 商品的全选和全不选
    $('.settlements').find(':checkbox').change(function () {
        // 获取全选的checkbox的选中状态
        is_checked = $(this).prop('checked')
        // 遍历商品的对应的checkbox，设置这些checkbox的选中状态和全选的checkbox保持一致
        $('.cart_list_td').find(':checkbox').each(function () {
            $(this).prop('checked', is_checked)
        })
        // 更新页面的信息
        update_page_info()
    })

    // 商品对应的checkbox状态发生改变时，设置全选checkbox的状态
    $('.cart_list_td').find(':checkbox').change(function () {
        // 获取页面上所有商品的数目
        all_len = $('.cart_list_td').length
        // 获取页面上被选中的商品的数目
        checked_len = $('.cart_list_td').find(':checked').length
        is_checked = true
        if (checked_len < all_len){
            is_checked = false
        }
        $('.settlements').find(':checkbox').prop('checked', is_checked)
        // 更新页面的信息
        update_page_info()
    })


    // 更新购物车中商品的数量
    error_update = false
    total = 0

    // 购物车商品数量的增加
    $('.add').click(function () {
        // 获取商品的id和商品的数量

        count = $(this).next().val()


        // 组织参数
        count = parseInt(count)+1



        // 判断更新是否成功
        if (error_update == false){
            // 重新设置商品的数目
            $(this).next().val(count)
            // 计算商品的小计
            update_goods_amount($(this).parents('ul'))
            // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
            is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
            if (is_checked){
                // 更新页面信息
                update_page_info()
            }
            // 更新页面上购物车商品的总件数
            $('.total_count').children('em').text(total)
        }
    })

    // 购物车商品数量的减少
    $('.minus').click(function () {
        // 获取商品的id和商品的数量
        count = $(this).prev().val()

        // 校验参数
        count = parseInt(count)-1
        if (count <= 0){
            return
        }

        // 更新购物车中的记录

        // 判断更新是否成功
        if (error_update == false){
            // 重新设置商品的数目
            $(this).prev().val(count)
            // 计算商品的小计
            update_goods_amount($(this).parents('ul'))
            // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
            is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
            if (is_checked){
                // 更新页面信息
                update_page_info()
            }
            // 更新页面上购物车商品的总件数
            $('.total_count').children('em').text(total)
        }
    })

    // 记录用户输入之前商品的数量
    pre_count = 0
    $('.num_show').focus(function () {
        pre_count = $(this).val()
    })

    // 手动输入购物车中的商品数量
    $('.num_show').blur(function () {
        // 获取商品的id和商品的数量
        sku_id = $(this).attr('sku_id')
        count = $(this).val()

        // 校验参数
        if (isNaN(count) || count.trim().length==0 || parseInt(count)<=0){
            // 设置商品的数目为用户输入之前的数目
            $(this).val(pre_count)
            return
        }

        // 更新购物车中的记录
        count = parseInt(count)
        update_remote_cart_info(goods_name, count)

        // 判断更新是否成功
        if (error_update == false){
            // 重新设置商品的数目
            $(this).val(count)
            // 计算商品的小计
            update_goods_amount($(this).parents('ul'))
            // 获取商品对应的checkbox的选中状态，如果被选中，更新页面信息
            is_checked = $(this).parents('ul').find(':checkbox').prop('checked')
            if (is_checked){
                // 更新页面信息
                update_page_info()
            }
            // 更新页面上购物车商品的总件数
            $('.total_count').children('em').text(total)
        }
        else{
            // 设置商品的数目为用户输入之前的数目
            $(this).val(pre_count)
        }
    })

    // 删除购物车中的记录
    $('.cart_list_td').children('.col08').children('a').click(function () {
        // 获取对应商品的id
        goods_name = $("#goods_name").text()
        csrf = $('input[name="csrfmiddlewaretoken"]').val()
        // 组织参数
        params = {'goods_name':goods_name, 'csrfmiddlewaretoken':csrf}
        // 获取商品所在的ul元素
        sku_ul = $(this).parents('ul')
        // 发起ajax post请求， 访问/cart/delete, 传递参数:sku_id
        $.post('/cart/delete', params, function (data) {
            if (data.errno == '1'){
                // 删除成功，异常页面上商品所在的ul元素
                update_page_info()
                sku_ul.remove()
                // 获取sku_ul中商品的选中状态
                is_checked = sku_ul.find(':checkbox').prop('checked')
                if (is_checked){
                    // 更新页面信息
                    update_page_info()
                }

            }
            else{
                alert(data.errmsg)
            }
        })
    })

	</script>
{% endblock buttom_js %}
	
